<template>
  <div class="auth-container cartoon-bg">
    <el-card class="auth-card ctn-card">
      <div class="auth-hero">
        <div class="hero-badge">🎮</div>
        <h2 class="ctn-title">欢迎来到涂色抢地盘</h2>
        <p class="hero-sub">登录或注册，开始你的对战之旅！</p>
      </div>
      <el-alert v-if="auth.token" type="success" title="已登录" description="你已登录，无需重复登录" show-icon class="mb-12" />
      <el-tabs v-model="tab" :disabled="Boolean(auth.token)" class="auth-tabs ctn-bubble ctn-tabs">
        <el-tab-pane label="登录" name="login">
          <el-form :model="loginForm" :rules="rules" ref="loginRef" class="auth-form ctn-form">
            <el-form-item prop="usernameOrEmail" label="用户名或邮箱">
              <el-input v-model="loginForm.usernameOrEmail" placeholder="输入用户名或邮箱" />
            </el-form-item>
            <el-form-item prop="password" label="密码">
              <el-input v-model="loginForm.password" type="password" show-password placeholder="输入登录密码" />
            </el-form-item>
            <el-button class="ctn-btn-primary" type="primary" @click="doLogin" :disabled="Boolean(auth.token)" :loading="loading">🚀 登录开始</el-button>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="注册" name="register">
          <el-form :model="registerForm" :rules="rules" ref="registerRef" class="auth-form ctn-form">
            <el-form-item prop="username" label="用户名">
              <el-input v-model="registerForm.username" placeholder="为自己取个酷酷的昵称" />
            </el-form-item>
            <el-form-item prop="email" label="邮箱">
              <el-input v-model="registerForm.email" placeholder="用于找回密码与同步数据" />
            </el-form-item>
            <el-form-item prop="password" label="密码">
              <el-input v-model="registerForm.password" type="password" show-password placeholder="设置登录密码" />
            </el-form-item>
            <el-button class="ctn-btn-success" type="success" @click="doRegister" :disabled="Boolean(auth.token)" :loading="loading">✨ 创建账号</el-button>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useAuthStore } from '@/stores/auth'
import { login, register } from '@/services/authService'
import http from '@/services/http'
// 已移除表单图标

const router = useRouter()
const auth = useAuthStore()
const tab = ref('login')
const loading = ref(false)
const testingConnection = ref(false)
const connectionStatus = ref('')
const loginForm = ref({ usernameOrEmail: '', password: '' })
const registerForm = ref({ username: '', email: '', password: '' })
const loginRef = ref()
const registerRef = ref()

const rules = {
  usernameOrEmail: [{ required: true, message: '请输入', trigger: 'blur' }],
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}

async function doLogin() {
  await loginRef.value.validate()
  loading.value = true
  try {
    const res = await login({
      UsernameOrEmail: loginForm.value.usernameOrEmail,
      Password: loginForm.value.password
    })
    auth.setAuth(res.token, res.user)
    ElMessage.success('登录成功')
    const redirect = router.currentRoute.value.query.redirect || '/home'
    router.push(String(redirect))
  } catch (e) {
    ElMessage.error(e?.response?.data || '登录失败')
  } finally {
    loading.value = false
  }
}

async function doRegister() {
  await registerRef.value.validate()
  loading.value = true
  try {
    await register({
      Username: registerForm.value.username,
      Email: registerForm.value.email,
      Password: registerForm.value.password
    })
    ElMessage.success('注册成功，请登录')
    tab.value = 'login'
  } catch (e) {
    ElMessage.error(e?.response?.data || '注册失败')
  } finally {
    loading.value = false
  }
}

// 测试按钮与接口已移除

onMounted(() => {
  if (auth.token) {
    const redirect = router.currentRoute.value.query.redirect || '/home'
    router.replace(String(redirect))
  }
})
</script>

<style scoped>
.auth-container { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.cartoon-bg { background: radial-gradient(1200px 600px at 10% 10%, #fff0f6 0%, rgba(255,240,246,0) 60%), radial-gradient(1200px 600px at 90% 20%, #e6f7ff 0%, rgba(230,247,255,0) 60%); }
.auth-card { width: 460px; border-radius: 18px; overflow: hidden; }
.mb-12 { margin-bottom: 12px; }

.auth-hero { text-align: center; padding: 10px 10px 0; }
.hero-badge { width: 64px; height: 64px; line-height: 64px; border-radius: 50%; margin: 0 auto 8px; background: linear-gradient(180deg, #ffe0f2, #fff); box-shadow: 0 6px 18px rgba(255, 122, 195, 0.25); font-size: 28px; }
.hero-sub { margin: 4px 0 0; color: #8f8f8f; font-size: 13px; }

.auth-tabs { margin-top: 12px; padding: 12px; border-radius: 14px; }
.auth-form { display: flex; flex-direction: column; gap: 12px; }

.el-form-item__label { font-weight: 600; color: #666; }
.el-input :deep(.el-input__wrapper) { border-width: 2px; border-radius: 12px; }

@media (max-width: 480px) {
  .auth-card { width: 100%; }
}
</style>


